<template>
  <a-modal
    title="终端限额管理详情"
    v-model="show"
    :maskClosable="false"
    :width="1050"
    placement="right"
    :closable="true"
    @cancel="onClose"
    :footer="null"
    :visiable="tremMchntInfoVisiable"
  >
    <a-form :form="form">
    <a-row>
      <a-col :md="12" :sm="24">
    <a-form-item label='终端编号'
                 v-bind="formItemLayout">
      <a-input v-decorator="['termNo',{rules: [{ required: true, message: '必填字段'}]}]"
               :disabled="true"/>
    </a-form-item>
  </a-col>
  </a-row>
  <a-row>
    <a-col :md="12" :sm="24">
      <a-form-item label="日累计限额"
                   v-bind="formItemLayout">
        <a-input v-decorator="['dayLimitAmt']"
                :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
    <a-col :md="12" :sm="24">
      <a-form-item label='月累计限额'
                   v-bind="formItemLayout">
        <a-input v-decorator="['monthLimitAmt']"
                 :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
  </a-row>

  <a-row>借记限额</a-row>
  <a-row>
    <a-col :md="12" :sm="24">
      <a-form-item label="单笔借记限额"
                   v-bind="formItemLayout">
        <a-input v-decorator="['singleLimitLoanMaxAmt']"
                 :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
    <a-col :md="12" :sm="24">
      <a-form-item label='日累计借记限额'
                   v-bind="formItemLayout">
        <a-input v-decorator="['dayLimitLoanAmt']"
                 :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
  </a-row>
  <a-row>
    <a-col :md="12" :sm="24">
      <a-form-item label="月累计借记限额"
                   v-bind="formItemLayout">
        <a-input v-decorator="['monthLimitLoanAmt']"
                 :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
  </a-row>

  <a-row>贷记限额</a-row>
  <a-row>
    <a-col :md="12" :sm="24">
      <a-form-item label="单笔贷记限额"
                   v-bind="formItemLayout">
        <a-input v-decorator="['singleLimitCreditMaxAmt']"
                 :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
    <a-col :md="12" :sm="24">
      <a-form-item label='日累计贷记限额'
                   v-bind="formItemLayout">
        <a-input v-decorator="['dayLimitCreditAmt']"
                 :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
  </a-row>
  <a-row>
    <a-col :md="12" :sm="24">
      <a-form-item label="月累计贷记限额"
                   v-bind="formItemLayout">
        <a-input v-decorator="['monthLimitCreditAmt']"
                 :disabled="operatorType!=='edit'"/>
      </a-form-item>
    </a-col>
  </a-row>
  </a-form>
  <br/>
  <br/>
  <div class="drawer-bootom-button">
    <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
      <a-button style="margin-righTt: .8rem">取消</a-button>
    </a-popconfirm>
    <a-button @click="handleSubmitTrem" type="primary" :loading="loading">提交</a-button>
  </div>
  </a-modal>
</template>
<script>

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16}
}
export default {
  name: 'TremMchntInfo',
  props: {
    tremMchntInfoVisiable: {
      default: false
    },
    instId: '',
  },
  data() {
    return {
      data: [],
      suData: [],
      suDataTrem:[],
      tremSuData:[],
      tremMchntInfo: {
        visiable: false
      },
      loading: false,
      operatorType:'',
      formItemLayout,
      form: this.$form.createForm(this),
      formTrem:this.$form.createForm(this),
      validateStatus: '',
      // firstValue: {},
      info: {
        infoName: '',
        remark: '',
        menuId: '',
        mchntLevelCode:''
      },
      queryParams: {
        instId: '',
        mchntNo: '',
      },
      infoTrem:{},
      mchntNoLevelInfos:[]
    }
  },
  computed: {
    show: {
      get: function () {
        return this.tremMchntInfoVisiable
      },
      set: function () {
      }
    }
  },
  mounted() {

  },
  //监听
  watch: {
    tabActiveKey (val, oldVal) {
      this.$nextTick(() => {
        switch (val) {
          case 0:
            this.tremSelectMchntNo;
            break;
        }
      })
    }
  },
  methods: {

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    getMoment(value) {
      return this.$moment(value).format('YYYY-MM-DD HH:MM:SS.MS')
    },

    tremSelectMchntNo(val) {
      let mchntNo = this.formTrem.getFieldsValue(['mchntNo'])
      if (mchntNo.mchntNo) {
        this.tremSuData = []
        let param = {}
        if (val) {
          param = {
            q: encodeURIComponent(val + `&${this.instId}`),
            pageSize: 20,
            mcNo : mchntNo.mchntNo
          }
          if (val.length >= 5) {
            this.$get('/admin/quota/merchantLevelManager/getAddTermNoList', param).then((r) => {
              let result = r.data.data

              this.tremSuData=result;
            })
          }
        } else {
          param = {
            q: encodeURIComponent(`&${this.instId}`),
            pageSize: 20,
            mcNo : mchntNo.mchntNo
          }
          this.$get('/admin/quota/merchantLevelManager/getAddTermNoList', param).then((r) => {
            let result = r.data.data
            this.tremSuData=result;
          })
        }
      }else {
        this.$message.warning('请先选择商户号获取商户等级！')
      }},

    tremSelected(val) {
      this.tremSelectMchntNo(val)
    },

    reset() {
      this.loading = false
      this.form.resetFields()
    },
    onClose() {
      this.reset()
      this.$emit('close')
    },

    handleSubmitTrem() {
      this.formTrem.validateFields((err, values) => {
        if (!err) {
          console.log("****d"+this.info.mchntLevelCode)
          this.setInfoFieldsTrem()
          this.loading = true
          this.infoTrem.instId = this.instId
          this.infoTrem.optFlag = 'edit'
          this.infoTrem.riskOccurArea = this.info.termAddrPrvnc + '/' + this.info.termAddrCity
          this.infoTrem.validDate = this.getMoment(this.info.validDate)
          this.infoTrem.mchntNo=this.queryParams.mchntNo
          this.infoTrem.notDiffAcctId=this.suData.notDiffAcctId
          this.infoTrem.loanId=this.suData.loanId
          this.infoTrem.creditId=this.suData.creditId
          this.infoTrem.mcTermNo=this.suData.termNo
          // console.log(this.info)
          this.$post('/admin/quota/merchantLevelManager/editTmQuota', this.infoTrem).then((r) => {
            if (r.data.code!="100000"){
              this.$message.error(r.data.message)
            }else {
              this.reset()

              this.$emit('success')
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    setInfoFieldsTrem() {
      let values = this.form.getFieldsValue(['mchntNo','notDiffAcctId','loanId','creditId','termNo',  'dayLimitAmt', 'monthLimitAmt',
        'singleLimitLoanMaxAmt', 'dayLimitLoanAmt', 'monthLimitLoanAmt', 'singleLimitCreditMaxAmt', 'dayLimitCreditAmt',
        'monthLimitCreditAmt'])
      if (typeof values !== 'undefined') {
        Object.keys(values).forEach(_key => {
          this.infoTrem[_key] = values[_key]
        })

      }
    },
    setInfoFieldsTremValues ({...info}) {
      let fields = ['mchntNo','notDiffAcctId','loanId','creditId','termNo',  'dayLimitAmt', 'monthLimitAmt',
        'singleLimitLoanMaxAmt', 'dayLimitLoanAmt', 'monthLimitLoanAmt', 'singleLimitCreditMaxAmt', 'dayLimitCreditAmt',
        'monthLimitCreditAmt','operatorType']
      Object.keys(info).forEach((key) => {
        if (fields.indexOf(key) !== -1) {
          this.form.getFieldDecorator(key)
          let obj = {}
          obj[key] = info[key]
          if (key=='mchntNo'){
            this.queryParams.mchntNo=  obj.mchntNo
          }
          if (key=='operatorType'){
            this.operatorType=obj.operatorType
          }
          this.form.setFieldsValue(obj)
        }
      })
      this.suData=info;
    },

  },

}
</script>
